<template>
    <div>
        <!--搜索  -->
        <template>
            <el-form :inline="true" :model="projectBiddingForm" :rules="projectBiddingFormRules" ref="projectBiddingFormRules">
                <el-row>
                    <el-col :span="22">
                        <el-form-item label="项目编号">
                            <el-input v-model="projectBiddingForm.projectNo"></el-input>
                        </el-form-item>
                        <el-form-item label="项目名称">
                            <el-input v-model="projectBiddingForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="项目状态">
                            <el-select v-model="projectBiddingForm.applicationArea" placeholder="请选择">
                                <el-option label="移动开发" value="移动开发"></el-option>
                                <el-option label="网站开发" value="网站开发"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="发布时间">
                            <el-date-picker v-model="projectBiddingForm.statusTimeStart" type="date" placeholder="选择日期">
                            </el-date-picker>
                            <el-date-picker v-model="projectBiddingForm.statusTimeEnd" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2" class="text-right">
                        <el-form-item>
                            <el-button type="primary" @click="fetchProjectBiddingList(projectBiddingForm)">查询</el-button>
                        </el-form-item>
                    </el-col>

                    <el-col>
                        <el-form-item label="项目属性">
                            <el-select v-model="projectBiddingForm.isInternal" placeholder="请选择">
                                <el-option label="内部" value="内部"></el-option>
                                <el-option label="外部" value="外部"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="项目专员">
                            <el-select v-model="projectBiddingForm.specialistId" placeholder="请选择">
                                <el-option label="张三" value="张三"></el-option>
                                <el-option label="李四" value="李四"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </template>
        <!--列表  -->
        <template>
            <el-table :data="projectBiddingList" border row-class-name="text-center" height="364" class="user-table" style="width:100%">
                <el-table-column show-overflow-tooltip prop="projectNo" label="项目编号">

                </el-table-column>
                <el-table-column show-overflow-tooltip prop="name" label="项目名称">
                    <template scope="scope">
                        <router-link  class="color02 pointer" :to="'/project/whole-detail/' + scope.row.id">
                            {{scope.row.name}}
                        </router-link>
                        <span class="isInternal-icon" v-if="scope.row.isInternal==1">内</span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="applicationArea" label="应用领域">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="budget" label="项目预算">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="cycleTogether" label="项目周期">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="userAccountName" label="发布方">
                    <template scope="scope">
                        <span class="color02 pointer" @click='openEmployerDetail(scope.$index, projectBiddingList)'>
                            {{scope.row.userAccountName}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="publishTime" label="发布时间">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="applyCount" label="竞标人数">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="subStatusText" label="项目状态">
                </el-table-column>
                <el-table-column prop="specialistName" label="项目专员">
                    <template scope="scope">
                        <el-select v-model="scope.row.specialistName" size="small" placeholder="请选择" @change="changeSpecialistName(scope)" @visible-change="beforeSelectSpecialistName">
                            <el-option v-for="item in specialistList" :key="item.id" :label="item.name" :value="item.id" :value-key="scope.row.name">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="操作" width="120">
                    <template scope="scope">
                        <span class="color02 pointer mr-15" @click='openFetchFollowUpLog(scope.$index, projectBiddingList)'>
                             跟进
                         </span>
                        <el-dropdown trigger="click">
                            <div class="more-menu">
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <router-link :to="'/project/whole-edit/'+ scope.row.id"><el-dropdown-item >编辑</el-dropdown-item></router-link>
                                <el-dropdown-item @click.native.prevent='setVisible(scope.$index, projectBiddingList)'>设置主站不显示</el-dropdown-item>
                                <el-dropdown-item @click.native.prevent='setInternal(scope.$index, scope.row)'>设为内部项目</el-dropdown-item>
                                <el-dropdown-item @click.native.prevent='openOperationLog(scope.$index, projectBiddingList)'>操作记录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template>
            <div class="pagination-wrapper" v-if = "projectBiddingPagination.totalPage>1">
                <div class="fr font-14 mt-10">
                    <span class="page-num mr-25">
                        总数：<span v-text="projectBiddingPagination.totalCount"></span>
                        每页显示 <span v-text="projectBiddingPagination.pageSize"></span>
                        条 共 <span v-text="projectBiddingPagination.totalPage"></span> 页
                    </span>
                    <el-pagination  @current-change="changeProjectBiddingPage" :current-page="projectBiddingPagination.currentPage" :page-size="projectBiddingPagination.pageSize"
                        layout="prev, pager, next" :total="projectBiddingPagination.totalCount" class="fr">
                    </el-pagination>
                </div>
            </div>
        </template>
        <!-- 发包方信息查看 -->
        <template>
            <el-dialog title="发包方信息查看" :visible.sync="employerDetailDialogStatus">
                <div>
                    <el-row>
                        <el-col :span="12">
                            <div>昵称：<span v-text="employerDetailContent.nickname"></span> </div>
                        </el-col>
                        <el-col :span="12">
                            <div>注册时间：<span v-text="employerDetailContent.createdAt"></span></div>
                        </el-col>
                    </el-row>
                    <el-row class="mt-15">
                        <el-col :span="12">
                            <div>真实名称：<span v-text="employerDetailContent.name"></span></div>
                        </el-col>
                        <el-col :span="12">
                            <div>账号状态：<span v-text="employerDetailContent.status"></span></div>
                        </el-col>
                    </el-row>
                    <el-row class="mt-15">
                        <el-col :span="12">
                            <div>联系电话： <span v-text="employerDetailContent.mobile"></span></div>
                        </el-col>
                        <el-col :span="12">
                            <div>认证状态：<span v-text="employerDetailContent.certificationStatus"></span></div>
                        </el-col>
                    </el-row>
                    <el-row class="mt-15">
                        <el-col :span="12">
                            <div>电子邮箱：<span v-text="employerDetailContent.email"></span></div>
                        </el-col>
                        <el-col :span="12">
                            <div>信用等级：<span v-text="employerDetailContent.creditScore"></span></div>
                        </el-col>
                    </el-row>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="employerDetailDialogStatus = false">关闭</el-button>
                </div>
            </el-dialog>
        </template>
        <!-- 跟进记录管理 -->
        <template>
            <el-dialog title="跟进记录管理" size="small" :visible.sync="followUpLogListDialogStatus">
                <div class="text-right md-10"><el-button @click="openFollowUpCreateLog">新增跟进记录</el-button></div>
                <el-table :data="followUpLogList" border style="width: 100%" class="text-center">
                    <el-table-column show-overflow-tooltip prop="managerName" label="跟进人">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="createdAt" label="跟踪日期">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="workStage" label="跟踪阶段">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="title" label="跟踪事项">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="content" label="跟踪内容">
                    </el-table-column>
                </el-table>
                <div class="pagination-wrapper clearfix" v-if = "followUpLogListPagination.totalPage>1">
                    <el-pagination @current-change="changeFollowUpLogList" class="mt-15 ml-05 fr font-14" :current-page="followUpLogListPagination.currentPage"
                        :page-size="followUpLogListPagination.pageSize" layout="prev, pager, next" :total="followUpLogListPagination.totalCount">
                    </el-pagination>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="followUpLogListDialogStatus = false">关闭</el-button>
                </div>
            </el-dialog>
        </template>
        <!-- 跟进记录新增 -->
        <template>
            <el-dialog title="跟进记录管理" size="small" :visible.sync="followUpLogCreateDialogStatus" @close="closeDialog('followUpLogCreateForm')">
                <template>
                    <el-form :model="followUpLogCreateForm" :rules="followUpLogCreateFormRules" ref="followUpLogCreateForm">
                        <el-row>
                            <el-col :span = "12">
                                <el-form-item label="跟进人" prop="managerId" class="ml-14">
                                   <el-input v-model="followUpLogCreateForm.managerId"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span = "12">
                                <el-form-item label="跟进时间" prop="managerName">
                                     <el-date-picker v-model="followUpLogCreateForm.managerName" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span = "12">
                                <el-form-item label="跟进阶段" prop="workStage">
                                    <el-input v-model="followUpLogCreateForm.workStage"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span = "12">
                                <el-form-item label="跟进主题" prop="title">
                                    <el-input v-model="followUpLogCreateForm.title"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="跟进内容" prop="content">
                                    <el-input v-model="followUpLogCreateForm.content" type="textarea" :rows="4" placeholder="请简要输入跟进内容，最大 300 字"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </template>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="followUpLogCreateDialogStatus = false">取消</el-button>
                    <el-button type="primary" @click="submitCreateFollowUpLog('followUpLogCreateForm')">保存</el-button>
                </div>
            </el-dialog>
        </template>
        <!--操作记录查看 -->
        <template>
            <el-dialog title="操作记录查看" size="small" :visible.sync="operationLogListDialogStatus">
                <el-table :data="operationLogList" border style="width: 100%" class="text-center">
                    <el-table-column show-overflow-tooltip prop="managerName" label="操作人">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="createdAt" label="操作时间">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="title" label="操作主题">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="content" label="操作内容">
                    </el-table-column>
                </el-table>
                <div class="pagination-wrapper clearfix" v-if = "operationLogListPagination.totalPage>1">
                    <el-pagination @current-change="changeOperationLogList" class="mt-15 ml-05 fr font-14" :current-page="operationLogListPagination.currentPage"
                        :page-size="operationLogListPagination.pageSize" layout="prev, pager, next" :total="operationLogListPagination.totalCount">
                    </el-pagination>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="operationLogListDialogStatus = false">关闭</el-button>
                </div>
            </el-dialog>
        </template>

    </div>
</template>
<script>
    import {
        getListBid,
        postSetSpecialist,
        postSetVisible,
        postSetInternal,
        postAddFollowUpLog,
        getFollowUpLogList,
        getOperationLogList

    } from '@/api/project.js'
import {
        getUserAccountBasicInfo,
        getSpecialistList
} from '@/api/user.js'
    export default {
        data () {
            return {
                // 判断是否更新设置专员信息
                isSelectSpecialistName: false,
                // 判断是否更新设置托管原因
                isSelectNotHostingReason: false,
                // 列表搜索表单
                projectBiddingForm: {
                    applicationArea: '',
                    statusTimeStart: '',
                    statusTimeEnd: '',
                    isInternal: '',
                    specialistId: ''
                },
                // 列表搜索表单规则
                projectBiddingFormRules: {},
                // 列表搜索列表
                projectBiddingList: [],
                // 列表搜索分页
                projectBiddingPagination: {},

                // 发包方信息
                employerDetailDialogStatus: false,
                employerDetailContent: {

                },
                // 跟进记录
                followUpLogListDialogStatus: false,
                followUpLogList: [],
                followUpLogListPagination: {},

                // 跟进记录新增
                followUpLogCreateDialogStatus: false,
                followUpLogCreateForm: {
                    managerName: '',
                    createdAt: '',
                    workStage: '',
                    title: '',
                    content: ''
                },
                // 跟进记录表单规则
                followUpLogCreateFormRules: {
                    managerId: {
                        required: true,
                        message: '请填写跟进人',
                        trigger: 'blur'
                    },
                    managerName: {
                        required: true,
                        message: '请填写跟进时间',
                        type: 'date',
                        trigger: 'blur'
                    },
                    workStage: {
                        required: true,
                        message: '请填写跟踪阶段',
                        trigger: 'blur'
                    },
                    title: {
                        required: true,
                        message: '请填写跟踪事项',
                        trigger: 'blur'

                    },
                    content: [{
                        required: true,
                        message: '请填写跟踪内容',
                        trigger: 'blur'
                    },
                    {
                        max: 300,
                        message: '长度在300 个字符'

                    }]
                },
                // 操作记录查看
                operationLogListDialogStatus: false,
                operationLogList: [],
                operationLogListPagination: {},

                activeDialogData: {},
                options: [{
                    value: '跟踪无反馈',
                    label: '跟踪无反馈'
                }, {
                    value: '财务不支持',
                    label: '财务不支持'
                }, {
                    value: '已经转线下合作',
                    label: '已经转线下合作'
                }, {
                    value: '自己已解决',
                    label: '自己已解决'
                }],
                // 未托管原因
                specialistList: [],
                value: ''
            }
        },
        methods: {
            beforeSelectSpecialistName (isSelect) {
                this.isSelectSpecialistName = isSelect
            },
            // 获取专员列表
            fetchSpecialist () {
                getSpecialistList().then((response) => {
                    if (response.data.code === 0) {
                        this.specialistList = response.data.data
                        console.log(this.specialistList)
                    } else if (response.data.code === 1) {
                        this.$message('获取列表数据失败')
                    } else {
                        this.$message('未知错误')
                    }
                }).catch(function (err) {
                    console.log(err)
                })
            },
            // 修改项目专员
            changeSpecialistName (scope) {
                let req = {
                    id: scope.row.id,
                    specialistId: scope.row.specialistName
                }
                if (this.isSelectSpecialistName) {
                    postSetSpecialist(req).then(data => {
                        let msg = data.data.code
                        if (msg === 0) {
                            this.$message('项目专员设置成功')
                        } else {
                            this.$message('项目专员设置失败，请稍候再试')
                        }
                    })
                }
            },
            // 获取列表内容
            fetchProjectBiddingList (data, currentPage = 1, pageSize = 10) {
                let param = data || {}
                param.currentPage = currentPage
                getListBid(data).then((response) => {
                    if (response.data.code === 0) {
                        let d = response.data.data.data
                        // 转换后台数据
                        for (let i = 0; i < d.length; i++) {
                            // 项目预算
                            d[i].budget = d[i].budgetMin + ' - ' + d[i].budgetMax
                            // 项目周期
                            d[i].cycleTogether = d[i].cycle + d[i].cycleName
                            // 项目状态
                            switch (d[i].subStatus) {
                            case 1:
                                d[i].subStatusText = '待选标'
                                break
                            case 2:
                                d[i].subStatusText = '等待中标方确认'
                                break
                            case 3:
                                d[i].subStatusText = '合同待发送 '
                                break
                            case 4:
                                d[i].subStatusText = '合同待接包方确认'
                                break
                            default:
                                d[i].subStatusText = '未知状态'
                            }
                        }
                        this.projectBiddingList = d
                        this.projectBiddingPagination = response.data.data
                    } else if (response.data.code === 1) {
                        this.$message('获取列表数据失败')
                    } else {
                        this.$message('未知错误')
                    }
                }).catch(function (err) {
                    console.log(err)
                })
            },
            // 翻页
            changeProjectBiddingPage (data) {
                let param = this.projectBiddingForm
                this.fetchProjectBiddingList(param, data)
            },
            // 对话框弹出，填写弹出框的显示数据
            activeDialog (index, data, isActive = false) {
                if (isActive) {
                    this.activeDialogData = data[index]
                } else {
                    this.activeDialogData = {}
                }
            },
            // 关闭对话框
            closeDialog (formName) {
                this.resetForm(formName)
            },
            // 重置表单
            resetForm (formName) {
                this.$refs[formName].resetFields()
            },
            // 发包方详细信息
            openEmployerDetail (index, data) {
                this.activeDialog(index, data, true)
                this.employerDetailDialogStatus = true
                this.fetchUserAccountBasicInfo({
                    id: this.activeDialogData.id
                })
            },
            // 获取用户信息
            fetchUserAccountBasicInfo (data) {
                getUserAccountBasicInfo(data).then((response) => {
                    if (response.data.code === 0) {
                        this.employerDetailContent = response.data.data
                        this.contractorDetailContent = response.data.data
                    } else if (response.data.code === 1) {
                        this.$message('获取用户信息失败')
                    } else {
                        this.$message('未知错误')
                    }
                }).catch(function (err) {
                    console.log(err)
                })
            },
            // 设置主站不显示
            setVisible (index, data) {
                this.$confirm('您确定将项目【' + data[index].name + '】设置为主站不显示吗？?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    postSetVisible({
                        id: data[index].id,
                        visible: 2
                    }).then((response) => {
                        console.log(response.data.code)
                        if (response.data.code === 0) {
                            this.$message('修改成功')
                        } else if (response.data.code === 1) {
                            this.$message('修改失败')
                        }
                    })
                }).catch(function (err) {
                    console.log(err)
                })
            },
            // 设为内部项目
            setInternal (index, data) {
                this.$confirm('您确定将项目【' + data.name + '】设置为内部项目？?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    postSetInternal({
                        id: data.id,
                        isInternal: 1
                    }).then((response) => {
                        console.log(response.data.code)
                        if (response.data.code === 0) {
                            this.$message('修改成功')
                            data.isInternal = 1
                        } else if (response.data.code === 1) {
                            this.$message('修改失败')
                        }
                    })
                }).catch(function (err) {
                    console.log(err)
                })
            },

            // 跟进日志
            // 打开跟进日志弹出框
            openFetchFollowUpLog (index, data) {
                this.activeDialog(index, data, true)
                this.followUpLogListDialogStatus = true
                this.fetchFollowUpLogList({
                    id: this.activeDialogData.id
                })
            },
            // 打开新增跟进日志弹出框
            openFollowUpCreateLog (index, data) {
                // this.activeDialog(index, data, true)
                this.followUpLogCreateDialogStatus = true
            },
            // 提交新增跟进日志
            submitCreateFollowUpLog (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let data = this.followUpLogCreateForm
                        postAddFollowUpLog(data).then((response) => {
                            if (response.data.code === 0) {
                                this.$message('提交成功')
                            } else if (response.data.code === 1) {
                                this.$message('提交失败')
                            } else {
                                this.$message('未知错误')
                            }
                        })
                    }
                })
            },
            // 获取跟进记录管理
            fetchFollowUpLogList (data) {
                getFollowUpLogList(data).then((response) => {
                    if (response.data.code === 0) {
                        this.followUpLogList = response.data.data.data
                        this.followUpLogListPagination = response.data.data
                    } else if (response.data.code === 1) {
                        this.$message('获取列表数据失败')
                    } else {
                        this.$message('未知错误')
                    }
                }).catch(function (err) {
                    console.log(err)
                })
            },
            // 跟进记录管理翻页
            changeFollowUpLogList (page) {
                let param = {
                    id: this.activeDialogData.id,
                    currentPage: page,
                    pageSize: 10
                }
                this.fetchFollowUpLogList(param)
            },
            // 操作日志
            // 打开操作日志弹出框
            openOperationLog (index, data) {
                this.activeDialog(index, data, true)
                this.operationLogListDialogStatus = true
                this.fetchOperationLog({
                    id: this.activeDialogData.id
                })
            },
            // 获取操作记录管理
            fetchOperationLog (data) {
                getOperationLogList(data).then((response) => {
                    if (response.data.code === 0) {
                        console.log(response.data.data.data)
                        this.operationLogList = response.data.data.data
                        this.operationLogListPagination = response.data.data
                    } else if (response.data.code === 1) {
                        this.$message('获取列表数据失败')
                    } else {
                        this.$message('未知错误')
                    }
                }).catch(function (err) {
                    console.log(err)
                })
            },
            // 操作记录翻页
            changeOperationLogList (page) {
                let param = {
                    id: this.activeDialogData.id,
                    currentPage: page,
                    pageSize: 10
                }
                this.fetchOperationLog(param)
            }
        },
        created () {
            this.fetchProjectBiddingList()
            this.fetchSpecialist()
        }
    }

</script>

<style scoped>
    .mt-15 {
        margin-top: 15px
    }

    .ml-05 {
        margin-left: -5px
    }

    .mr-25 {
        margin-right: 25px;
    }

</style>
